import cs from 'classnames';
import Icon from './Icon';
import React from 'react';
import styled from 'styled-components';
import {Category, getIconName} from 'hooks/useTags';

const FullIcon = styled.div<{margin?: number}>`
  width: 56px;
  height: 78px;
  margin: ${props => props.margin ? `8px ${props.margin}px` : '8px'};
  .iconWrapper{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #999;
    text-align: center;
    padding: 8px 0;
    &.cost{
      border: 1px solid #FF865E;
    }
    &.income{
      border: 1px solid #FEE440;
    }
    .icon{
      width: 40px;
      height: 40px;
    }
  }
  .description{
    font-size: 14px;
    text-align: center;
    line-height: 22px;
  }
`;


type Props = {
  tagName: string;
  category?: Category;
  margin?: number;
}

const IconWithName: React.FC<Props> = (props) => {
  const getClassName = (category: Category | undefined) => {
    switch (category) {
      case '-':
        return 'cost';
      case '+':
        return 'income';
      default :
        return '';
    }
  };
  return (
    <FullIcon margin={props.margin}>
      <div className={cs('iconWrapper', getClassName(props.category))}>
        <Icon name={getIconName(props.tagName)}/>
      </div>
      <div className="description oneLine">{props.tagName}</div>
    </FullIcon>
  );
};

export {IconWithName};